<template>
	<view class="u-p-20">
		<!-- <u-icon name="arrow-right" class="u-m-t-20" label="商品列表" color="red"></u-icon> -->
		<u-grid class="goods-main" :col="2" :border="false">
			<u-grid-item v-for="item in lists" :key="item.id" @click="toGoodsInfo(item.code)">
				<view class="u-p-10 m-width-full u-text-center">
					<view class="goods-item">
						<u-image width="100%" height="300rpx" :src="item.cover" :lazy-load="true"></u-image>
						<view class="u-line-1 u-font-md goods-price">￥{{ Number(item.price_selling) }}</view>
						<view class="u-line-1 u-font-sm goods-title">{{ item.name }}</view>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
		<u-loadmore :status="status" />
	</view>
</template>

<style lang="scss">
page {
	background: #fff;
}
</style>

<script>
export default {
	data() {
		return {
			page: 1,
			lists: [],
			status: 'loadmore'
		};
	},
	onLoad() {
		this.$u.login.init();
		this.load();
	},
	methods: {
		load() {
			this.getLists();
		},
		// 跳转到商品详情
		toGoodsInfo(code) {
			this.$u.route('pages/goods/show', {
				code: code
			});
		},
		// 获取商品列表
		getLists() {
			this.$u
				.get('data/api.goods/getGoods', {
					page: this.page
				})
				.then(ret => {
					this.page = ret.data.page.current + 1;
					this.lists = this.lists.concat(ret.data.list);
					if (ret.data.page.current >= ret.data.page.pages) {
						this.page = ret.data.page.current;
						this.status = 'nomore';
					}
				});
		}
	},
	// 下拉刷新处理
	onPullDownRefresh() {
		this.page = 1;
		this.lists = [];
		this.status = 'loadmore';
		this.load();
		setTimeout(() => uni.stopPullDownRefresh(), 1000);
	},
	// 下划加载数据
	onReachBottom() {
		if (this.status === 'loadmore') {
			this.getLists();
		}
	}
};
</script>
